<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三国杀移动版</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    .color {
        color: red;
    }

    .active {
        display: none;
    }
</style>

<body>
    <div id="role">
        <h3>武将列表---></h3>
        最新武将: <button @click="btnClick">点击显示 / 收起</button>
        <div v-if="seen" :class="myClass" v-for="role in newRoles">{{role.name}} / {{role.grade}}</div>
        <ol>
            <li v-for="role in roles">{{role.name}} / {{role.grade}}</li>
        </ol>
    </div>
</body>

<script>
    let role = new Vue({
        el: "#role",
        data: {
            seen: true,
            roles: [
                {
                    name: 'SP赵云',
                    grade: '精品'
                },
                {
                    name: '刘焉',
                    grade: '史诗'
                },
                {
                    name: '界关羽',
                    grade: '精品'
                }
            ],
            newRoles: [
                {
                    name:'神•孙策',
                    grade:'史诗',
                },
                {
                    name:'高览',
                    grade:'精品',
                }
            ],
            myClass: {
                color: true,
                active: true,
            }
        },
        methods: {
            btnClick: function () {
                // this.seen = !this.seen; 
                this.myClass.active = !this.myClass.active;
            }
        }
    })
</script>

</html>